<!-- 
 * @Description: 
 * @Version: 1.0
 * @Author: AaroLi
 * @Date: 2024-08-22 14:46:09
 * @LastEditors: AaroLi
 * @LastEditTime: 2024-09-25 16:03:17
-->

<template>
  <div class="home-v">
    <div class="top">
      <div class="top_left">
        <div class="top_left_top">我的代办</div>
        <div class="top_left_bottom">
          <a-popconfirm :showCancel="false">
            <template #icon></template>
            <template #title>
              <div>
                <p @click="goDetail(0)"
                  >待填报 : <span style="color: #1890ff; cursor: pointer; font-size: 20px; margin-left: 10px">{{ num3 || 0 }}</span></p
                >
                <p @click="goDetail(1)"
                  >待审批 : <span style="color: #1890ff; cursor: pointer; font-size: 20px; margin-left: 10px">{{ num4 || 0 }}</span></p
                >
                <p @click="goDetail(1)"
                  >待归档 : <span style="color: #1890ff; cursor: pointer; font-size: 20px; margin-left: 10px">{{ num5 || 0 }}</span></p
                >
              </div>
            </template>
            <template #okButton> </template>
            <div style="display: flex">
              <div class="box"> </div>
              <div class="box_info">
                <div class="box_info_top">{{ num1 || 0 }}</div>
                <div class="box_info_bottom">流程待办</div>
              </div>
            </div>
          </a-popconfirm>
          <div style="display: flex" @click="goDetail(2)">
            <div class="boxs"> </div>
            <div class="box_info">
              <div class="box_info_top">{{ num2 || 0 }}</div>
              <div class="box_info_bottom">流程已办</div>
            </div>
          </div>
        </div>
      </div>
      <div class="top_right">
        <div class="top_left_top">常用功能</div>
        <div class="container">
          <div class="content">
            <div class="box" @click="goDetail(3)">
              <img src="./img/i_xmtb@1x.png" alt="图片" class="image" />
              <div class="text">项目填报</div>
            </div>
          </div>
          <div class="content">
            <div class="box" @click="goDetail(4)">
              <img src="./img/i_xmcx@1x.png" alt="图片" class="image" />
              <div class="text">项目查询</div>
            </div>
          </div>
          <div class="content">
            <div class="box" @click="goDetail(5)">
              <img src="./img/i_gscq@1x.png" alt="图片" class="image" />
              <div class="text">招投标代理抽取</div>
            </div>
          </div>
          <div class="content">
            <div class="box" @click="goDetail(6)">
              <img src="./img/i_zjcq@1x.png" alt="图片" class="image" />
              <div class="text">专家抽取</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- middle -->
    <div class="middle">
      <div class="middle_left">
        <div class="middle_left_top"
          >项目填报情况
          <a-date-picker style="float: right" v-model:value="value1" valueFormat="YYYY" @change="onChange" picker="year" />
        </div>
        <div class="middle_left_bottom" ref="chartRef" :style="{ height: chartHeight, width: chartWidth }"> </div>
      </div>
      <div class="middle_right">
        <div class="middle_left_top">招标形式占比</div>
        <div class="middle_right_bottom" ref="chartRef2" :style="{ height: chartHeight2, width: chartWidth }"> </div>
      </div>
    </div>
    <!-- bottom -->
    <div class="bottom">
      <div class="bottom_left">
        <div class="bottom_left_top"
          >金额统计(<span style="font-size: 14px">万元</span>)
          <a-button :type="TYPE == '1' ? 'link' : 'text'" @click="initChart3(1)">本月</a-button>
          <a-button :type="TYPE == '2' ? 'link' : 'text'" @click="initChart3(2)">全年</a-button>
          <a-range-picker v-model:value="value2" valueFormat="YYYY-MM" @change="onChange1" style="float: right" />
        </div>
        <div class="bottom_left_bottom" ref="chartRef3" :style="{ height: chartHeight2, width: chartWidth }"> </div>
      </div>
      <div class="bottom_right">
        <div class="bottom_left_top">招标代理统计 <a-range-picker v-model:value="value3" style="float: right" valueFormat="YYYY-MM" @change="onChange2" /></div>
        <div class="bottom_right_bottom">
          <a-table :columns="columns" :data-source="data" :pagination="false" :scroll="{ y: '200px' }" :size="'small'">
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.key === 'ranking'">
                <div>
                  <span
                    :style="{
                      display: 'inline-block',
                      width: '20px',
                      height: '20px',
                      lineHeight: '20px',
                      borderRadius: '50%',
                      backgroundColor: index < 3 ? '#F68900' : '#F0F2F5',
                      marginRight: '8px',
                      color: index < 3 ? '#fff' : '#333',
                    }">
                    {{ index + 1 }}</span
                  >
                </div>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { useRouter } from 'vue-router';
  import { DatePicker as ADatePicker, RangePicker as ARangePicker } from 'ant-design-vue';
  import { getNumbers, getMoneyNumbers, getTodo } from './api';
  import { basicProps } from './com/props';
  import * as echarts from 'echarts';
  import { useECharts } from '/@/hooks/web/useECharts';
  import type { Dayjs } from 'dayjs';
  import { useMessage } from '/@/hooks/web/useMessage';
  import dayjs from 'dayjs';
  const { createMessage } = useMessage();
  type RangeValue = [Dayjs, Dayjs];
  const router = useRouter();
  const columns = [
    {
      title: '排名',
      key: 'ranking',
      width: 80,
      align: 'center',
    },
    {
      title: '招标代理公司',
      dataIndex: 'yname',
      key: 'yname',
    },
    {
      title: '项目数',
      width: 120,
      dataIndex: 'projectsNumber',
      align: 'center',
      key: 'projectsNumber',
    },
  ];

  const data = ref([]);
  defineProps({
    ...basicProps,
  });
  const value1 = ref('2024');
  const TYPE = ref('1');
  const num1 = ref<any>('');
  const num2 = ref('');
  const num3 = ref('');
  const num4 = ref('');
  const num5 = ref('');
  const currentYear = dayjs().year();
  const startDate = dayjs(`${currentYear}-01-01`);
  const endDate = dayjs(); // 今天

  const value3 = ref([startDate, endDate]);
  const value2 = ref<RangeValue>();
  // const value3 = ref<RangeValue>();
  const chartHeight = '70%'; // 设置高度
  const chartHeight2 = '80%'; // 设置高度
  const chartWidth = '100%'; // 设置宽度
  let chartInstance = null;
  let chartInstance3 = null;
  const chartRef = ref<HTMLDivElement | null>(null);
  const chartRef2 = ref<HTMLDivElement | null>(null);
  const chartRef3 = ref<HTMLDivElement | null>(null);
  onMounted(() => {
    initChart();
    initChart2(chartRef2);
    initChart3(1);
    getData();
    initList(3);
  });
  // 时间选择
  const onChange = (value, dateString) => {
    console.log('value', value, dateString);
    value1.value = dateString;
    initChart();
  };
  // 时间选择
  const onChange1 = (value, dateString) => {
    console.log('value3', value, dateString);
    value2.value = dateString;
    initChart3(4);
  };
  // 时间选择
  const onChange2 = (value, dateString) => {
    value3.value = dateString;
    initList(4);
  };
  const getData = () => {
    getTodo().then(res => {
      console.log('res---------', res);
      num1.value = Number(res.data.toBeArchivedApprovalCount) + Number(res.data.toBeFilledCount) + Number(res.data.pendingApprovalCount);
      num2.value = res.data.alreadyCount;
      num3.value = res.data.toBeFilledCount;
      num4.value = res.data.pendingApprovalCount;
      num5.value = res.data.toBeArchivedApprovalCoun;
    });
  };
  // const initChart = (chartRef, type) => {
  //   const { setOptions } = useECharts(chartRef);
  //   getNumbers(type, value1.value).then(res => {
  //     if (res.code == 200) {
  //       const xArray = res.data.indicatorList.map(item => item.xdata);
  //       const spCount = res.data.indicatorList.map(item => item.spCount);
  //       const baCount = res.data.indicatorList.map(item => item.baCount);
  //       const yArray = res.data.indicatorList.map(item => item.ydata);
  //       nextTick(() => {
  //         setOptions({
  //           tooltip: {
  //             trigger: 'axis',
  //             axisPointer: {
  //               lineStyle: {
  //                 width: 1,
  //                 color: '#019680',
  //               },
  //             },
  //           },
  //           legend: {
  //             data: ['备案', '审批'], // 添加图例
  //             top: '5%', // 调整图例位置
  //             icon: 'circle', // 设置图例为圆点样式
  //           },
  //           grid: { left: '1%', right: '1%', top: '25%', bottom: 0, containLabel: true },
  //           xAxis: {
  //             type: 'category',
  //             data: xArray,
  //           },
  //           yAxis: {
  //             type: 'value',
  //             data: yArray,
  //           },
  //           series: [
  //             {
  //               name: '审批', // 为每个系列命名
  //               data: spCount,
  //               type: 'bar',
  //               stack: '总量', // 设置为同一组叠加
  //               barMaxWidth: 20,
  //               itemStyle: {
  //                 color: '#2A9CFF', // 系列1颜色
  //               },
  //             },
  //             {
  //               name: '备案', // 第二个系列
  //               data: baCount,
  //               type: 'bar',
  //               stack: '总量', // 设置为同一组叠加
  //               barMaxWidth: 20,
  //               itemStyle: {
  //                 color: '#94E6FF', // 系列1颜色
  //               },
  //             },
  //           ],
  //         });
  //       });
  //       console.log('xArray', xArray);
  //       console.log('yArray', yArray);
  //     } else {
  //       createMessage.error(res.msg);
  //     }
  //   });
  // };
  const initChart = () => {
    // const { setOptions } = useECharts(chartRef);
    getNumbers('2', value1.value).then(res => {
      if (res.code == 200) {
        const xArray = res.data.indicatorList.map(item => item.xdata);
        const spCount = res.data.indicatorList.map(item => item.spCount);
        const baCount = res.data.indicatorList.map(item => item.baCount);
        const yArray = res.data.indicatorList.map(item => item.ydata);
        // nextTick(() => {
        //   setOptions({
        //     tooltip: {
        //       trigger: 'axis',
        //       axisPointer: {
        //         lineStyle: {
        //           width: 1,
        //           color: '#019680',
        //         },
        //       },
        //     },
        //     legend: {
        //       data: ['备案', '审批'], // 添加图例
        //       top: '5%', // 调整图例位置
        //       icon: 'circle', // 设置图例为圆点样式
        //     },
        //     grid: { left: '1%', right: '1%', top: '25%', bottom: 0, containLabel: true },
        //     xAxis: {
        //       type: 'category',
        //       data: xArray,
        //     },
        //     yAxis: {
        //       type: 'value',
        //       data: yArray,
        //     },
        //     series: [
        //       {
        //         name: '审批', // 为每个系列命名
        //         data: spCount,
        //         type: 'bar',
        //         stack: '总量', // 设置为同一组叠加
        //         barMaxWidth: 20,
        //         itemStyle: {
        //           color: '#2A9CFF', // 系列1颜色
        //         },
        //       },
        //       {
        //         name: '备案', // 第二个系列
        //         data: baCount,
        //         type: 'bar',
        //         stack: '总量', // 设置为同一组叠加
        //         barMaxWidth: 20,
        //         itemStyle: {
        //           color: '#94E6FF', // 系列1颜色
        //         },
        //       },
        //     ],
        //   });
        // });
        nextTick(() => {
          // 设置 ECharts 实例
          if (!chartInstance) {
            chartInstance = echarts.init(chartRef.value);
          }

          // 设置图表选项
          chartInstance.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                lineStyle: {
                  width: 1,
                  color: '#019680',
                },
              },
            },
            legend: {
              data: ['备案', '审批'],
              top: '5%',
              icon: 'circle',
            },
            grid: { left: '1%', right: '1%', top: '25%', bottom: 0, containLabel: true },
            xAxis: {
              type: 'category',
              data: xArray,
            },
            yAxis: {
              type: 'value',
              data: yArray,
            },
            series: [
              {
                name: '审批',
                data: spCount,
                type: 'bar',
                stack: '总量',
                barMaxWidth: 20,
                itemStyle: {
                  color: '#2A9CFF',
                },
              },
              {
                name: '备案',
                data: baCount,
                type: 'bar',
                stack: '总量',
                barMaxWidth: 20,
                itemStyle: {
                  color: '#94E6FF',
                },
              },
            ],
          });
        });
        console.log('xArray', xArray);
        console.log('yArray', yArray);
      } else {
        createMessage.error(res.msg);
      }
    });
  };
  const initChart2 = chartRef => {
    const { setOptions } = useECharts(chartRef);
    var colorList = ['#1890FF', '#8543E0', '#21CCFF', '#0E42D2', '#13C2C2', '#BFBFBF'];
    getMoneyNumbers(2, '4').then(res => {
      if (res.code == 200) {
        // const xArray = res.data.dataList.map(item => item.projectsNumber);
        res.data.dataList.forEach(v => {
          v.projectsNumber = Number(v.projectsNumber);
          v.name = v.yname;
          v.value = v.projectsNumber;
        });
        const totalPrice = res.data.dataList.reduce((sum, item) => sum + item.projectsNumber, 0);
        const yArray = res.data.dataList.map(item => item.yname);
        setOptions({
          title: {
            text: '招标形式',
            x: 'center',
            y: '35%',
            textStyle: {
              fontSize: 20,
            },
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'horizontal',
            bottom: '0%', // 设置在底部
            left: 'center',
            data: yArray,
            // data: ['公开招标', '邀请招标', '竞争性谈判', '询价', '单一来源采购'],
            icon: 'circle',
            textStyle: {
              color: '#333',
              fontSize: 14,
            },
          },
          series: [
            {
              type: 'pie',
              center: ['50%', '40%'],
              radius: ['50%', '70%'],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return colorList[params.dataIndex];
                  },
                },
              },
              label: {
                show: true,
                position: 'outside',
                // formatter: '{d}%\n',
                formatter: function (params) {
                  // 当前项的值
                  const currentValue = params.value;

                  // 计算百分比，保留两位小数
                  const percent = ((currentValue / totalPrice) * 100).toFixed(2);

                  return `${percent}%\n`;
                },
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 30,
                  lineStyle: {
                    width: 1,
                  },
                },
              },
              // data: [
              //   { name: '公开招标', value: 1.45 },
              //   { name: '邀请招标', value: 2.93 },
              //   { name: '竞争性谈判', value: 3.15 },
              //   { name: '询价', value: 4.78 },
              //   { name: '单一来源采购', value: 5.93 },
              // ],
              data: res.data.dataList,
            },
          ],
        });
      } else {
        createMessage.error(res.msg);
      }
    });
  };
  // const initChart3 = chartRef => {
  //   const { setOptions } = useECharts(chartRef);
  //   var colorList = ['#3BA0FF', '#8543E0', '#21CCFF', '#FAD337', '#13C2C2', '#0E42D2'];
  //   getMoneyNumbers(2, '3').then(res => {
  //     if (res.code == 200) {
  //       res.data.dataList.forEach(v => {
  //         v.money = Number(v.money);
  //         v.projectsNumber = Number(v.projectsNumber);
  //         v.name = v.yname;
  //         v.value = v.money;
  //       });
  //       const totalPrice = res.data.dataList.reduce((sum, item) => sum + item.money, 0);
  //       const yArray = res.data.dataList.map(item => item.yname);
  //       setOptions({
  //         title: {
  //           text: '项目金额',
  //           subtext: totalPrice + '万元',
  //           textStyle: {
  //             fontSize: 16,
  //             color: '#999',
  //             lineHeight: 20,
  //           },
  //           subtextStyle: {
  //             fontSize: 20,
  //             color: '#333',
  //           },
  //           textAlign: 'center',
  //           left: '39.8%',
  //           top: '40%',
  //         },
  //         tooltip: {
  //           trigger: 'item',
  //         },
  //         legend: {
  //           orient: 'vertical',
  //           right: '10%',
  //           top: 'center',
  //           selectedMode: false,
  //           data: yArray,
  //           // data: ['建筑工程', '货物采购', '服务采购', '不动产出租', '资产处置', '其他'],
  //           icon: 'circle',
  //           textStyle: {
  //             color: '#77899c',
  //             rich: {
  //               uname: {
  //                 color: '#595959',
  //                 width: 100,
  //               },
  //               unum: {
  //                 color: '#8C8C8C',
  //                 width: 40,
  //                 align: 'right',
  //               },
  //               un: {
  //                 color: '#595959',
  //                 width: 40,
  //                 align: 'right',
  //                 fontWeight: 600,
  //               },
  //             },
  //           },
  //           formatter(name) {
  //             const dataItem = res.data.dataList.find(item => item.yname === name);
  //             if (dataItem) {
  //               const total = totalPrice; // 获取当前项目的 total
  //               const value = dataItem.money; // 获取当前项目的 money
  //               const percent = ((value / total) * 100).toFixed(2); // 计算百分比
  //               return `{uname|${name} | ${percent}%}     {un|${dataItem.money}}`;
  //             }
  //             return name; // 如果没有找到，返回名称
  //           },
  //         },
  //         color: colorList,
  //         series: [
  //           {
  //             name: '姓名',
  //             type: 'pie',
  //             radius: [60, 90],
  //             center: ['40%', '50%'],
  //             label: {
  //               show: false,
  //             },
  //             labelLine: {
  //               show: false,
  //             },
  //             itemStyle: {
  //               borderWidth: 3,
  //               borderColor: '#fff',
  //             },
  //             // data: [
  //             //   { name: '建筑工程', value: 100 },
  //             //   { name: '货物采购', value: 100 },
  //             //   { name: '服务采购', value: 100 },
  //             //   { name: '不动产出租', value: 100 },
  //             //   { name: '资产处置', value: 100 },
  //             //   { name: '其他', value: 100 },
  //             // ],
  //             data: res.data.dataList,
  //           },
  //         ],
  //       });
  //     } else {
  //       createMessage.error(res.msg);
  //     }
  //   });
  // };
  const initChart3 = v => {
    TYPE.value = v;
    var colorList = ['#3BA0FF', '#8543E0', '#21CCFF', '#FAD337', '#13C2C2', '#0E42D2'];
    let t1 = '';
    let t2 = '';
    if (Array.isArray(value2.value)) {
      t1 = dayjs(value2.value[0]).format('YYYY-MM-DD HH:mm:ss'); // 格式化为字符串
      t2 = dayjs(value2.value[1]).format('YYYY-MM-DD HH:mm:ss'); // 格式化为字符串
    }

    getMoneyNumbers(v, '3', t1, t2).then(res => {
      if (res.code == 200) {
        res.data.dataList.forEach(v => {
          v.money = Number(v.money);
          v.projectsNumber = Number(v.projectsNumber);
          v.name = v.yname;
          v.value = v.money;
        });
        const totalPrice = res.data.dataList.reduce((sum, item) => sum + item.money, 0);
        const yArray = res.data.dataList.map(item => item.yname);
        nextTick(() => {
          // 设置 ECharts 实例
          if (!chartInstance3) {
            chartInstance3 = echarts.init(chartRef3.value);
          }

          // 设置图表选项
          chartInstance3.setOption({
            title: {
              text: '项目金额',
              subtext: totalPrice + '万元',
              textStyle: {
                fontSize: 16,
                color: '#999',
                lineHeight: 20,
              },
              subtextStyle: {
                fontSize: 20,
                color: '#333',
              },
              textAlign: 'center',
              left: '30%',
              top: '40%',
            },
            tooltip: {
              trigger: 'item',
            },
            legend: {
              orient: 'vertical',
              right: '10%',
              top: 'center',
              selectedMode: false,
              data: yArray,
              // data: ['建筑工程', '货物采购', '服务采购', '不动产出租', '资产处置', '其他'],
              icon: 'circle',
              textStyle: {
                color: '#77899c',
                rich: {
                  uname: {
                    color: '#595959',
                    width: 100,
                  },
                  unum: {
                    color: '#8C8C8C',
                    width: 40,
                    align: 'right',
                  },
                  un: {
                    color: '#595959',
                    width: 40,
                    align: 'right',
                    fontWeight: 600,
                  },
                },
              },
              formatter(name) {
                const dataItem = res.data.dataList.find(item => item.yname === name);
                if (dataItem) {
                  const total = totalPrice; // 获取当前项目的 total
                  const value = dataItem.money; // 获取当前项目的 money
                  const percent = ((value / total) * 100).toFixed(2); // 计算百分比
                  return `{uname|${name} | ${isNaN(percent) ? 0 : percent}%}     {un|${dataItem.money}}`;
                }
                return name; // 如果没有找到，返回名称
              },
            },
            color: colorList,
            series: [
              {
                name: '姓名',
                type: 'pie',
                radius: [60, 90],
                center: ['30%', '50%'],
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  borderWidth: 3,
                  borderColor: '#fff',
                },
                // data: [
                //   { name: '建筑工程', value: 100 },
                //   { name: '货物采购', value: 100 },
                //   { name: '服务采购', value: 100 },
                //   { name: '不动产出租', value: 100 },
                //   { name: '资产处置', value: 100 },
                //   { name: '其他', value: 100 },
                // ],
                data: res.data.dataList,
              },
            ],
          });
        });
        // setOptions({
        //   title: {
        //     text: '项目金额',
        //     subtext: totalPrice + '万元',
        //     textStyle: {
        //       fontSize: 16,
        //       color: '#999',
        //       lineHeight: 20,
        //     },
        //     subtextStyle: {
        //       fontSize: 20,
        //       color: '#333',
        //     },
        //     textAlign: 'center',
        //     left: '39.8%',
        //     top: '40%',
        //   },
        //   tooltip: {
        //     trigger: 'item',
        //   },
        //   legend: {
        //     orient: 'vertical',
        //     right: '10%',
        //     top: 'center',
        //     selectedMode: false,
        //     data: yArray,
        //     // data: ['建筑工程', '货物采购', '服务采购', '不动产出租', '资产处置', '其他'],
        //     icon: 'circle',
        //     textStyle: {
        //       color: '#77899c',
        //       rich: {
        //         uname: {
        //           color: '#595959',
        //           width: 100,
        //         },
        //         unum: {
        //           color: '#8C8C8C',
        //           width: 40,
        //           align: 'right',
        //         },
        //         un: {
        //           color: '#595959',
        //           width: 40,
        //           align: 'right',
        //           fontWeight: 600,
        //         },
        //       },
        //     },
        //     formatter(name) {
        //       const dataItem = res.data.dataList.find(item => item.yname === name);
        //       if (dataItem) {
        //         const total = totalPrice; // 获取当前项目的 total
        //         const value = dataItem.money; // 获取当前项目的 money
        //         const percent = ((value / total) * 100).toFixed(2); // 计算百分比
        //         return `{uname|${name} | ${percent}%}     {un|${dataItem.money}}`;
        //       }
        //       return name; // 如果没有找到，返回名称
        //     },
        //   },
        //   color: colorList,
        //   series: [
        //     {
        //       name: '姓名',
        //       type: 'pie',
        //       radius: [60, 90],
        //       center: ['40%', '50%'],
        //       label: {
        //         show: false,
        //       },
        //       labelLine: {
        //         show: false,
        //       },
        //       itemStyle: {
        //         borderWidth: 3,
        //         borderColor: '#fff',
        //       },
        //       // data: [
        //       //   { name: '建筑工程', value: 100 },
        //       //   { name: '货物采购', value: 100 },
        //       //   { name: '服务采购', value: 100 },
        //       //   { name: '不动产出租', value: 100 },
        //       //   { name: '资产处置', value: 100 },
        //       //   { name: '其他', value: 100 },
        //       // ],
        //       data: res.data.dataList,
        //     },
        //   ],
        // });
      } else {
        createMessage.error(res.msg);
      }
    });
  };
  const initList = v => {
    let type = v;
    let t1 = '';
    let t2 = '';
    if (Array.isArray(value3.value)) {
      console.log('value3.value', value3.value);
      if (value3.value[0] != '' && value3.value[1] != '') {
        t1 = dayjs(value3.value[0]).format('YYYY-MM-DD HH:mm:ss'); // 格式化为字符串
        t2 = dayjs(value3.value[1]).format('YYYY-MM-DD HH:mm:ss'); // 格式化为字符串
      } else {
        type = 3;
      }
    }
    getMoneyNumbers(type, '5', t1, t2).then(res => {
      if (res.code == 200) {
        data.value = res.data.dataList;
      } else {
        createMessage.error(res.msg);
      }
    });
  };
  const goDetail = v => {
    if (v == 0) return router.push('/FillingBiddingProjects');
    if (v == 1) return router.push('/ApprovalBiddingProjects');
    if (v == 2) return router.push('/BiddingProjectInquiry');
    if (v == 3) return router.push('/FillingBiddingProjects');
    if (v == 4) return router.push('/BiddingProjectInquiry');
    if (v == 5) return router.push('/Company');
    if (v == 6) return router.push('/Extraction');
  };
</script>
<style lang="less">
  .home-v {
    background: @app-main-background;
    height: 105vh; /* 全屏高度 */
  }
  .top {
    display: flex;
    height: 150px;
    justify-content: space-between; /* 在盒子之间分配空间 */
    cursor: pointer;
    &_left {
      flex: 1; /* 使盒子宽度相等 */
      margin: 0 10px; /* 每个盒子的左右边距为10px，总共20px的空隙 */
      background: #ffffff;
      border-radius: 4px;
    }
    &_right {
      flex: 1; /* 使盒子宽度相等 */
      margin: 0 10px; /* 每个盒子的左右边距为10px，总共20px的空隙 */
      background: #ffffff;
      border-radius: 4px;
    }
    .top_left_top {
      font-size: 16px;
      font-weight: 600;
      padding: 10px 20px;
      border-bottom: 1px solid #e8e8e8;
    }
    .top_left_bottom {
      display: flex;
      margin-top: 7px;
      .box {
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border-radius: 50%;
        margin-top: 15px;
        margin-left: 90px;
        background-image: url('./img/i_daiban@1x.png');
        background-size: cover;
      }
      .boxs {
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border-radius: 50%;
        margin-top: 15px;
        margin-left: 90px;
        background-image: url('./img/i_yiban@1x.png');
        background-size: cover;
      }
      .box_info {
        margin-top: 15px;
        margin-left: 10px;
        &_top {
          font-size: 20px;
          font-weight: 600;
        }
        &_bottom {
          margin-top: 5px;
          font-size: 14px;
        }
      }
    }
    .container {
      display: flex;
      justify-content: center; /* 水平居中 */
    }
    .content {
      cursor: pointer;
      width: 25%; /* 盒子宽度为25% */
      display: flex;
      margin: 10px; /* 盒子间距 */
      flex-direction: column; /* 竖直方向布局 */
      align-items: center; /* 内容水平居中 */
      text-align: center; /* 文字居中 */
      .box {
        display: flex; /* 使用 flexbox */
        flex-direction: column; /* 竖直排列 */
        align-items: center; /* 内容水平居中 */
        text-align: center; /* 文字居中 */
      }
    }

    .image {
      width: 40px; /* 图片宽度100% */
      height: 40px; /* 自适应高度 */
      margin-top: 5px;
    }
    .text {
      line-height: 1.5; /* 文字行高 */
      margin-top: 8px; /* 图片与文字间距 */
    }
  }
  .middle {
    display: flex;
    height: 300px;
    margin: 15px 0;
    justify-content: space-between; /* 在盒子之间分配空间 */
    cursor: pointer;
    .middle_left_top {
      font-size: 16px;
      font-weight: 600;
      padding: 10px 20px;
      border-bottom: 1px solid #e8e8e8;
    }
    .middle_left_bottom {
      width: 100%; /* 或者你需要的宽度 */
      height: 180px;
    }
    &_left {
      width: 60%;
      margin: 0 10px; /* 每个盒子的左右边距为10px，总共20px的空隙 */
      background: #ffffff;
      border-radius: 4px;
    }
    &_right {
      width: 40%;
      margin: 0 10px; /* 每个盒子的左右边距为10px，总共20px的空隙 */
      background: #ffffff;
      border-radius: 4px;
    }
  }
  .bottom {
    display: flex;
    height: 300px;
    margin: 15px 0;
    justify-content: space-between; /* 在盒子之间分配空间 */
    cursor: pointer;
    .bottom_left_top {
      font-size: 16px;
      font-weight: 600;
      padding: 10px 20px;
      border-bottom: 1px solid #e8e8e8;
    }
    &_left {
      width: 47%;
      margin: 0 10px; /* 每个盒子的左右边距为10px，总共20px的空隙 */
      background: #ffffff;
      border-radius: 4px;
    }
    &_right {
      width: 53%;
      margin: 0 10px; /* 每个盒子的左右边距为10px，总共20px的空隙 */
      background: #ffffff;
      border-radius: 4px;
    }
    .bottom_right_bottom {
      padding: 16px 20px;
    }
  }
</style>
<style lang="less" scoped>
  :deep(.home-v .ant-popover-buttons button) {
    display: none !important;
  }
</style>
